<!--
 * @Author: jhw
 * @Date: 2025-08-13 10:16:19
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-22 16:55:02
 * @Description:
-->
<template>
  <div v-if="store.coms.length > 0">
    <div ref="preview-container" class="preview-container pb-40px">
      <div class="center mx-auto">
        <div class="button-group flex justify-between items-center">
          <div class="flex justify-between">
            <el-button type="danger" @click="gobackHandle">返回</el-button>
            <el-button type="success" @click="genQuiz">生成在线问卷</el-button>
          </div>
          <div class="mr-15px">
            <el-text class="mx-1px">题目数量：{{ store.questionCount }}</el-text>
          </div>
        </div>
        <div class="content-group">
          <div class="content mb-10px" v-for="(com, index) in coms" :key="index">
            <component
              :is="com.type"
              :componentId="com.id"
              :status="com.status"
              :serialNum="serialNum[index]"
            />
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="信息" width="500">
      分享链接: <a :href="quizLink" target="_blank">{{ quizLink }}</a>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="copyLink">复制链接</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getSurveyById } from '@/api';
import { useEditorStore } from '@/stores/useEditor';
import { restoreSurvey } from '@/utils/effect';
import { useSerialNum } from '@/utils/hooks';
import { ElMessage } from 'element-plus';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();
const from = route.query.from as string; // 问卷类型
const id = route.query.id as string; // 问卷id
const store = useEditorStore();
const coms = computed(() => store.coms);
const serialNum = computed(() => useSerialNum(coms.value).value);
const dialogVisible = ref(false);
const quizLink = ref('');
const surveyId = ref('');

const copyLink = () => {
  navigator.clipboard.writeText(quizLink.value);
  ElMessage.success('复制成功');
};

const gobackHandle = () => {
  router.push({
    name: 'base-component',
    query: {
      id,
      type: from,
    },
  });
};

const getSurvey = async () => {
  if (!id) return;
  const { code, data } = await getSurveyById(id);
  if (code === 200) {
    surveyId.value = data.surveyId;
    restoreSurvey(data.components);
    store.setComs(data);
  }
};

const genQuiz = () => {
  quizLink.value = `${window.location.origin}/submit-answer/${surveyId.value}`;
  dialogVisible.value = true;
};

onMounted(() => {
  getSurvey();
});
</script>

<style scoped lang="scss">
.preview-container {
  width: 100vw;
  min-height: 100vh;
  background: url('@/assets/imgs/editor_background.png');
}
.center {
  width: 800px;
}
.button-group {
  width: 100%;
  height: 60px;
  top: 0;
  left: 0;
  background-color: var(--white);
  z-index: 100;
}
.content-group {
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  background: var(--white);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>
